// postcss 插件 vite内置了postCss 无需安装
import {Plugin} from "postcss"
const Options = {
  viewportWidth: 375,
}

interface Options {
  viewportWidth: number
}

export const PostCssToViewport = (options:Options = Options):Plugin => {
  const opt = Object.assign({}, Options, options)

  return {
    postcssPlugin: "postcss-px-to-viewport",
    // Declaration 获取节点的钩子函数
    Declaration(node) {
      // px 转换成 vw
      // 也可以匹配其他自定义字符，可以做到随心所欲的变化 比如单位是lp
      if(node.value.includes("px")) {
        // console.log(node.value)
        const num = parseFloat(node.value)  // 考虑到有小数
        node.value = `${((num / opt.viewportWidth) * 100).toFixed(2)}vw;`
      }
    }
  }
}